<template>
  <div class="homeicons">
    <swiper :option="swiperOption">
      <swiper-slide v-for="(page,index) in pages" :key = "index">
        <div class="icon" v-for="item in page" :key="item.id">
          <div class="iconImgContainer">
            <img :src="item.imgUrl" alt="" class="iconImg">
          </div>
          <p class="iconText">{{item.desc}}</p>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>
<script>
export default {
  name: 'HomeIcons',
  props: {
    iconsList: Array
  },
  data: function () {
    return {
      swiperOption: {
        autoplay: false
      }
    }
  },
  computed: {
    pages: function () {
      const pages = []
      this.iconsList.forEach((item, index) => {
        const pageIndex = Math.floor(index / 8)
        if (!pages[pageIndex]) {
          pages[pageIndex] = []
        }
        pages[pageIndex].push(item)
      })
      return pages
    }
  }
}
</script>
<style lang="stylus" scoped>
  .homeicons >>> .swiper-slide
                    width 100%
                    height 3.8rem
                    display flex
                    flex-direction row
                    flex-wrap wrap
                    justify-content flex-start
                    align-item center
                    .icon
                      width 25%
                      height 1.9rem
                      display flex
                      flex-direction column
                      justify-content center
                      align-content  center
                      .iconImgContainer
                        width 100%
                        text-align center
                        .iconImg
                          width : 1.1rem
                          height: 1.1rem
                      .iconText
                        width 100%
                        text-align center
</style>
